import { FormControl, FileUpload, DetailPage, ProUpload, RichText, richTextToHtml } from "@web-design/ui";
import React, { Profiler, useEffect, useMemo, useState } from "react";
// import "../package/ui/node_modules/suneditor/dist/css/suneditor.min.css"; 

// import "./suneditor.min.css";
// import "katex/dist/katex.min.css";
import { Button, DatePicker, Form, Input, InputNumber, Space, Upload } from "antd";
import "./test.less";
import { ClockCircleFilled, SearchOutlined } from "@ant-design/icons";
// import { toHtml } from "@web-design/ui/src/RichText";

const App = () => {
  // const {open,files} = useFileUpload()
  console.log("filesfiles")
  // new Error("ss");
  const items = [
    {
      label: "上传",
      name: "a",
      span: 3,
      children: <FileUpload maxCount={1} action='https://boss-api-test.hiphopservice.com/file/upload' listType="picture-card">上传</FileUpload>,
    },
    {
      label: "站点名称站点名称站点名称",
      // hidden:true,
      rules: [{ required: true }],
      span:3,
      children: (
        <Input
          addonBefore="+86"
          addonAfter={<SearchOutlined />}
          prefix={<ClockCircleFilled />}
          suffix={<ClockCircleFilled />}
        // prefix={<IconClockCircle />}
        // suffix={<IconInfoCircle />}
        />
      ),
      name: "sss3seeeeee",
    },
    {
      label: "文件上传",
      required: true,
      children: (
        <ProUpload listType='picture-card' maxCount={2} fileName="ssss">
          <Button>上传文件</Button>
        </ProUpload>
        // <InputNumber
        // disabled
        //   addonBefore={"sss"}
        //   addonAfter={<SearchOutlined />}
        //   prefix={<ClockCircleFilled />}
        // />
      ),
      span:3,
      name: "sss4",
    },
    {
      label: "站点域名",
      disabled: true,
      name: "sss5",
    },
    {
      label: "买家帐号",
      children: <DatePicker disabled />,

      name: "sss",
    },
    {
      label: "买家ID",
      name: "sss6",
      children: <Input.Password />,
    },
    {
      label: "买家ID",
      span: 1,
      //   labelCol: { span: 3 },
      name: "sss6",
      children: <Input.TextArea />,
    },
  ];
  const [form] = Form.useForm();
  return (
    <DetailPage
      action={
        <Space>
          <Button
            type="primary"
            onClick={async () => {
              const data = form.getFieldsValue()
              console.log("表单数据",richTextToHtml( data.aaa));
              console.log("表单数据", await form.validateFields());

              form.validateFields();
            }}
          >
            保存
          </Button>
        </Space>
      }
    >

      {/* <Button onClick={open}>上传文件</Button>
      {files.map(item=>{
        return <div key={item.uid}>{item.name}</div>
      })} */}

      <FormControl
        onValuesChange={e => {
          // console.log('onValuesChange', e)
        }}
        labelAlign="left"
        // labelAlign='right'
        layout="vertical"
        // layout="horizontal"
        // labelCol={{ span: 8 }}
        initialValues={{
          list: [{}],
          RichText: `<div>
          <p>111</p>
          <strong>2222</strong>
          <div>
            <img src="https://xinghuo.xfyun.cn/static/media/sparkdesk.34d76de5c2313b16ec3beacbe4269b9f.svg" alt=""  />
          </div>
          `,
          sss4: 'https://xinghuo.xfyun.cn/static/media/sparkdesk.34d76de5c2313b16ec3beacbe4269b9f.svg?' + Math.random(),
          a: 'ss'
        }}
        labelWidth={100}
        form={form}
      >
        <FormControl.Group>
        <FormControl.Panel
          labelCol={{ span: 2 }}
          title="填写说明"
          items={[
            {
              label: "参数说明",
              name: "RichText",
              children:  <RichText  fileUploadData={{ fileOwnerId: 180007411,
                fileOwnerType: 2,
                fileType: 1,}}  />,
            },
          ]}
          layout="vertical"
        />
          <FormControl.Panel column={3} title="基础信息" items={items} />
          <FormControl.Panel
            labelCol={{ span: 6 }}
            title="基础信息"
            items={items}
            layout="horizontal"
          />
        </FormControl.Group>

        <FormControl.List
        tabel
          maxCount={2}
          name="list"
          title="列表"
          items={items}

        />
        
      </FormControl>
    </DetailPage>
  );
};
export default App;
